<template>
  <div class="landing-page">
    <!-- 1. 顶部导航/品牌区 -->
    <header class="header">
      <div class="header-left">
        <div class="logo-container">
          <div class="logo-text-custom">路趣智行</div>
          <span class="slogan">AI赋能，探索无界</span>
        </div>
        <nav class="nav-links">
          <div class="nav-link" :class="{ 'active-nav': currentTab === 'home' }" @click="switchTab('home')">
            <span>首页</span>
          </div>
          <div class="nav-link" :class="{ 'active-nav': currentTab === 'dashboard' }" @click="switchTab('dashboard')">
            <span>发现游记</span>
          </div>
<!--          <div class="nav-link" :class="{ 'active-nav': currentTab === 'map' }" @click="switchTab('map')">-->
<!--            <span>灾害地图</span>-->
<!--          </div>-->
          <div class="nav-link" :class="{ 'active-nav': currentTab === 'secondhand' }" @click="switchTab('secondhand')">
            <span>二手集市</span>
          </div>
        </nav>
      </div>
      <div class="header-right">
        <button class="login-button" v-if="!isLogin" @click="showLoginModal">登录/注册</button>
        <button class="login-button" v-else @click="routerGoDashboardPage">进入社区</button>
      </div>
    </header>

    <!-- 根据当前标签显示不同的内容 -->
    <template v-if="currentTab === 'home'">
      <!-- 2. 主视觉区 -->
      <section class="hero-section">
        <el-carousel height="100vh" :pause-on-hover="false" :autoplay="true" interval="3000" v-if="!showVideo">
          <el-carousel-item v-for="(slide, index) in slides" :key="index">
            <div class="carousel-slide-content">
              <img :src="slide.image" :alt="slide.alt" class="carousel-image" />
              <div class="carousel-overlay"></div>
            </div>
          </el-carousel-item>
        </el-carousel>
        <video v-else class="background-video" autoplay loop muted>
          <source src="/placeholder-video.mp4" type="video/mp4" />
        </video>
        <div class="hero-content">
          <h1 class="hero-title">路趣智行，让每次出发都满载守护与惊喜</h1>
          <h2 class="hero-subtitle">实时路况告警 | 物种AI识别 | 户外装备流转</h2>
          <button class="cta-button" @click="routerGoDashboardPage">
            <span>进入社区</span>
            <ArrowRight class="icon" />
          </button>
        </div>
      </section>

      <!-- 3. 功能亮点展示 -->
      <section class="features-section">
        <h2 class="section-title">核心功能</h2>
        <div class="features-grid">
          <div class="feature-card">
            <div class="feature-icon">
              <Map class="icon" />
            </div>
            <h3 class="feature-title">智能灾害预警</h3>
            <p class="feature-description">AI分析地形地貌，实时路况灾害探查，为您提供最安全的路线</p>
            <!-- <div class="feature-image">
              <img src="/placeholder.svg?height=150&width=250" alt="智能路线规划" />
            </div> -->
          </div>

          <div class="feature-card">
            <div class="feature-icon">
              <Camera class="icon" />
            </div>
            <h3 class="feature-title">实时路面检测</h3>
            <p class="feature-description">AI识别路面状况，标注塌方和危险区域</p>
            <!-- <div class="feature-image">
              <img src="/placeholder.svg?height=150&width=250" alt="实时路面检测" />
            </div> -->
          </div>

          <div class="feature-card">
            <div class="feature-icon">
              <Leaf class="icon" />
            </div>
            <h3 class="feature-title">旅途生物识别</h3>
            <p class="feature-description">拍照即可识别5000+种野生动植物，获取详细科普信息</p>
            <!-- <div class="feature-image">
              <img src="/placeholder.svg?height=150&width=250" alt="旅途生物识别" />
            </div> -->
          </div>

          <div class="feature-card">
            <div class="feature-icon">
              <ShoppingBag class="icon" />
            </div>
            <h3 class="feature-title">二手装备集市</h3>
            <p class="feature-description">用户间直接交易，节约成本的同时保护环境</p>
            <!-- <div class="feature-image">
              <img src="/placeholder.svg?height=150&width=250" alt="二手装备集市" />
            </div> -->
          </div>

          <div class="feature-card">
            <div class="feature-icon">
              <UserCheck class="icon" />
            </div>
            <h3 class="feature-title">游记特色识别</h3>
            <p class="feature-description">AI分析游记内容，智能匹配标签</p>
            <!-- <div class="feature-image">
              <img src="/placeholder.svg?height=150&width=250" alt="个性化推荐引擎" />
            </div> -->
          </div>

          <div class="feature-card">
            <div class="feature-icon">
              <Users class="icon" />
            </div>
            <h3 class="feature-title">社区互动网络</h3>
            <p class="feature-description">连接志同道合的探险者，分享经验，结伴同行</p>
            <!-- <div class="feature-image">
              <img src="/placeholder.svg?height=150&width=250" alt="社区互动网络" />
            </div> -->
          </div>
        </div>
      </section>

      <!-- 4. 数据可视化大屏 -->
      <section class="data-visualization-section">
        <div class="data-container">
          <div class="map-container">
            <h3 class="data-title">实时数据地图</h3>
            <div ref="mapChart" class="map-chart"></div>
            <div class="map-legend">
              <div class="legend-item">
                <span class="legend-color user-color"></span>
                <span class="legend-text">用户足迹</span>
              </div>
              <div class="legend-item">
                <span class="legend-color danger-color"></span>
                <span class="legend-text">灾害预警</span>
              </div>
              <div class="legend-item">
                <span class="legend-color species-color"></span>
                <span class="legend-text">物种识别</span>
              </div>
            </div>
          </div>

          <div class="stats-container">
            <h3 class="data-title">我们的影响力</h3>
            <div class="stats-grid">
              <div class="stat-item">
                <div class="stat-value">{{ formatNumber(userCount) }}</div>
                <div class="stat-label">名探险者加入</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ formatNumber(routeCount) }}</div>
                <div class="stat-label">条智能路书</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ formatNumber(dailyPreventions) }}+</div>
                <div class="stat-label">每日阻止潜在危险</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ formatNumber(speciesCount) }}</div>
                <div class="stat-label">种野生动植物识别</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">¥{{ formatNumber(transactionAmount / 10000) }}万</div>
                <div class="stat-label">二手装备交易额</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 5. 用户证言与案例 -->
      <section class="testimonials-section">
        <div class="testimonials-container">
          <div class="testimonials-left">
            <h3 class="section-subtitle">用户评价</h3>
            <!--          <div class="video-testimonial">-->
            <!--            <img src="/placeholder.svg?height=200&width=350" alt="用户视频评价" class="testimonial-video" />-->
            <!--            <div class="play-button">-->
            <!--              <Play class="icon" />-->
            <!--            </div>-->
            <!--            <p class="video-caption">"AI预警让我避开落石，这可能是最靠谱的自驾社区！"</p>-->
            <!--          </div>-->
            <div class="text-testimonials">
              <div class="testimonial-item" v-for="(testimonial, index) in testimonials" :key="index">
                <div class="testimonial-content">
                  <Quote class="quote-icon" />
                  <p>{{ testimonial.content }}</p>
                </div>
                <div class="testimonial-author">
                  <img :src="testimonial.avatar" :alt="testimonial.name" class="author-avatar" />
                  <div class="author-info">
                    <div class="author-name">{{ testimonial.name }}</div>
                    <div class="author-title">{{ testimonial.title }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="testimonials-right">
            <h3 class="section-subtitle">加入我们</h3>
            <div class="join-us-container">
              <div class="tagline">
                <h2 class="main-tagline">探索无限可能，安全随行</h2>
                <p class="sub-tagline">每一次旅程都是一次冒险，每一次冒险都值得被守护</p>
              </div>
              <div class="benefits">
                <div class="benefit-item">
                  <div class="benefit-icon">
                    <Shield class="icon" />
                  </div>
                  <div class="benefit-text">智能安全预警，全程守护出行</div>
                </div>
                <div class="benefit-item">
                  <div class="benefit-icon">
                    <Target class="icon" />
                  </div>
                  <div class="benefit-text">个性化游记推荐，探索专属风景</div>
                </div>
                <div class="benefit-item">
                  <div class="benefit-icon">
                    <Users class="icon" />
                  </div>
                  <div class="benefit-text">结识志同道合的旅行伙伴</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 6. 终极行动号召 -->
      <section class="final-cta-section">
        <div class="cta-overlay"></div>
        <div class="cta-content">
          <h2 class="cta-title">准备好开启智能探险了吗？</h2>
          <h3 class="cta-subtitle">加入社区即可获得：</h3>
          <ul class="cta-benefits">
            <li class="benefit-item">
              <Check class="check-icon" />
              <span>个性化游记推荐</span>
            </li>
            <li class="benefit-item">
              <Check class="check-icon" />
              <span>独家灾害预警推送</span>
            </li>
            <li class="benefit-item">
              <Check class="check-icon" />
              <span>二手装备交易</span>
            </li>
          </ul>
          <div>
            <button class="giant-cta-button" @click="navigateToDashboard">
              <span>加入 {{ formatNumber(userCount) }} 名探险者</span>
              <ArrowRight class="icon" />
            </button>
          </div>

        </div>
      </section>
    </template>

    <!-- 发现游记页面 -->
    <template v-else-if="currentTab === 'dashboard'">
      <div class="content-section">
        <publicity-article-view />
      </div>
    </template>

<!--    &lt;!&ndash; 灾害地图页面 &ndash;&gt;-->
<!--    <template v-else-if="currentTab === 'map'">-->
<!--      <div class="content-section">-->
<!--        <map-component />-->
<!--      </div>-->
<!--    </template>-->

    <!-- 二手集市页面 -->
    <template v-else-if="currentTab === 'secondhand'">
      <div class="content-section">
        <PublicitySecondHandView />
      </div>
    </template>

    <!-- 7. 底部导航 -->
    <footer class="footer">
      <div class="footer-links">
        <a href="#" class="footer-link">关于我们</a>
        <span class="divider">|</span>
        <a href="#" class="footer-link">合作咨询</a>
        <span class="divider">|</span>
        <a href="#" class="footer-link">隐私政策</a>
      </div>
      <!-- <div class="social-links">
        <a href="#" class="social-link">
          <WechatIcon class="social-icon" />
        </a>
        <a href="#" class="social-link">
          <WeiboIcon class="social-icon" />
        </a>
        <a href="#" class="social-link">
          <TiktokIcon class="social-icon" />
        </a>
      </div> -->
      <div class="copyright">
        © {{ new Date().getFullYear() }} 智能自驾游社区平台
      </div>
    </footer>
  </div>
</template>

<script setup>
import {ref, onMounted, onBeforeUnmount, watch, computed, getCurrentInstance} from 'vue';
import sceneImg1 from '@/assets/imgs/scene1.jpg'
import sceneImg2 from '@/assets/imgs/scene2.jpg'
import sceneImg3 from '@/assets/imgs/scene3.jpg'
import { useRouter } from 'vue-router';
import UserUtil from '@/utils/User/User.js'
import * as echarts from 'echarts';
import chinaJson from '@/assets/china.json';
import { ElMessage } from 'element-plus';
import {
  ArrowRight,
  Check,
  Map,
  Camera,
  Leaf,
  ShoppingBag,
  UserCheck,
  Users,
  Play,
  Quote,
  Shield,
  Target
} from 'lucide-vue-next';
import PublicityArticleView from '@/pages/publicityPage/publicityArticleView.vue';
import PublicitySecondHandView from '@/pages/publicityPage/publicitySecondHandView.vue';

const isLogin = ref(false);
const { proxy } = getCurrentInstance();

onMounted(()=>{
  console.log(isLogin.value);
  console.log('UserUtil.isLogin()', UserUtil.isLogin());
  isLogin.value = UserUtil.isLogin();
})

// 显示登录弹窗
const showLoginModal = async () => {
  try {
    const { success } = await proxy.$login.show();
    if (success) {
      ElMessage.success('登录成功');
      isLogin.value = true;
    }
  } catch (error) {
    console.error('登录过程中发生错误:', error);
  }
};

echarts.registerMap('china', chinaJson);
// Custom icons for social media
// const WechatIcon = {
//   template: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 9.5c-.3-2.1 1.6-4 4.8-4.2 2.7-.2 5.1 1.3 5.7 3 .7 1.7-.3 3.5-1.3 4.2.3.5.6.7 1.8.7-1.5 1.2-1.6 3.3-3.4 3.2-1.8-.1-1.8-2.5-4.8-2.5-3 0-4.1 4.3-7.5 2.7 2.1-.9 2.9-3.3 2.5-5.1"/></svg>`
// };
//
// const WeiboIcon = {
//   template: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 14.5c.5.5 5.5 2.5 6-1 0 0 1 .5 2 1.5 1 1 2 1 2 1 1 0 2.5-1 2.5-1 .5-.5 1-2 .5-3-.5-1-1.5-2-1.5-2-1-.5-3-.5-3-.5-2 0-4.5 3-4.5 3 0-1 .5-3 .5-3 .5-1.5 1.5-3 1.5-3 .5-1 1-2.5 1-2.5C17 3 15 2 13.5 2c-1.5 0-3 1-3 1C9 4 8 6 8 6c-.5 1.5-1 4-1 4-.5 2 0 4.5 0 4.5 0 3 2.5 0 2.5 0"/></svg>`
// };
//
// const TiktokIcon = {
//   template: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5"/></svg>`
// };

// Carousel data
const showVideo = ref(false); // Set to true to show video instead of carousel
const slides = ref([
  {
    image: sceneImg1,
    alt: '自驾游车队+AI检测界面'
  },
  {
    image: sceneImg2,
    alt: '用户社区互动'
  },
  {
    image: sceneImg3,
    alt: '自然风光识别'
  }
]);

// Stats data with counter animation
const userCount = ref(356892);
const routeCount = ref(1203445);
const dailyPreventions = ref(200);
const speciesCount = ref(5328);
const transactionAmount = ref(23000000);

// Testimonials data
const testimonials = [
  {
    content: "AI识别功能太强大了，帮我认出了一种罕见的高山植物，还提供了详细介绍！",
    name: "李明",
    title: "摄影爱好者",
    avatar: "https://pic.52112.com/171214/Phographer/VgY1K9Xl9w.jpg"
  },
  {
    content: "灾害预警非常及时，避开了塌方区域，非常安心。",
    name: "张华",
    title: "资深自驾游爱好者",
    avatar: "https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/705b5a8db5ffef241846340e11f1c9fd.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_3840%2ch_2160"
  },
  {
    content: "在二手集市上买到了性价比超高的帐篷，省了不少钱，平台交易很安全。",
    name: "王芳",
    title: "户外探险新手",
    avatar: "https://ts1.tc.mm.bing.net/th/id/R-C.87e6e58d911dfe0e8fa988fb6597b1d0?rik=cYMH8%2fhrWzMjnQ&riu=http%3a%2f%2fy1.ifengimg.com%2f6fac0a141dc911c3%2f2014%2f1222%2frdn_549793d492b24.jpg&ehk=9fEM4IIPzPIzi6cj%2fh8WOXHXEcX3I8EXqO0xCJj9nvg%3d&risl=&pid=ImgRaw&r=0"
  }
];

// Map chart reference
const mapChart = ref(null);
let chart = null;

// Format number with commas
const formatNumber = (num) => {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};

// Initialize ECharts map
const initChart = () => {
  if (mapChart.value) {
    chart = echarts.init(mapChart.value);

    // Sample data for the map
    const data = [
      { name: '北京', value: [116.4, 39.9, 100], type: 'user' },
      { name: '上海', value: [121.4, 31.2, 80], type: 'user' },
      { name: '成都', value: [104.0, 30.7, 90], type: 'user' },
      { name: '西安', value: [108.9, 34.3, 70], type: 'danger' },
      { name: '拉萨', value: [91.1, 29.7, 60], type: 'species' },
      { name: '乌鲁木齐', value: [87.6, 43.8, 50], type: 'danger' },
      { name: '昆明', value: [102.7, 25.0, 75], type: 'species' },
      { name: '广州', value: [113.3, 23.1, 85], type: 'user' },
      { name: '哈尔滨', value: [126.5, 45.8, 65], type: 'danger' },
      { name: '九寨沟', value: [104.2, 33.2, 95], type: 'species' }
    ];

    const userPoints = data.filter(item => item.type === 'user').map(item => {
      return {
        name: item.name,
        value: item.value,
        itemStyle: {
          color: '#4CAF50'
        }
      };
    });

    const dangerPoints = data.filter(item => item.type === 'danger').map(item => {
      return {
        name: item.name,
        value: item.value,
        itemStyle: {
          color: '#F44336'
        }
      };
    });

    const speciesPoints = data.filter(item => item.type === 'species').map(item => {
      return {
        name: item.name,
        value: item.value,
        itemStyle: {
          color: '#2196F3'
        }
      };
    });

    const option = {
      backgroundColor: 'rgba(0,0,0,0.02)',
      geo: {
        map: 'china',
        roam: true,
        label: {
          show: false
        },
        itemStyle: {
          areaColor: '#323c48',
          borderColor: '#111'
        },
        emphasis: {
          itemStyle: {
            areaColor: '#2a333d'
          }
        }
      },
      series: [
        {
          name: '用户足迹',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: userPoints,
          symbolSize: (val) => val[2] / 10,
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke'
          },
          hoverAnimation: true,
          label: {
            show: false
          },
          emphasis: {
            label: {
              show: true
            }
          },
          zlevel: 1
        },
        {
          name: '灾害预警',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: dangerPoints,
          symbolSize: (val) => val[2] / 10,
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke'
          },
          hoverAnimation: true,
          label: {
            show: false
          },
          emphasis: {
            label: {
              show: true
            }
          },
          zlevel: 1
        },
        {
          name: '物种识别',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: speciesPoints,
          symbolSize: (val) => val[2] / 10,
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke'
          },
          hoverAnimation: true,
          label: {
            show: false
          },
          emphasis: {
            label: {
              show: true
            }
          },
          zlevel: 1
        }
      ]
    };

    chart.setOption(option);

    // Handle window resize
    window.addEventListener('resize', () => {
      chart.resize();
    });
  }
};

// 获取router实例
const router = useRouter();

// 新增路由和标签控制
const currentTab = ref('home'); // 默认选中的标签

// 切换标签的方法
const switchTab = (tab) => {
  if (tab === 'login') {
    showLoginModal();
  } else {
    currentTab.value = tab;
  }
};

// 监听标签页变化，滚动到顶部
watch(currentTab, (newTab, oldTab) => {
  console.log(`标签页从 ${oldTab} 切换到 ${newTab}`);
  
  // 平滑滚动到顶部
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});

const routerGoDashboardPage = () => {
  router.push({name: 'dashboard'});
}

// 导航到仪表板
const navigateToDashboard = () => {
  currentTab.value = 'dashboard';
  
  // 平滑滚动到顶部
  window.scrollTo({
    top: 0,
    behavior: 'instant'
  });
};

// 导航到其他页面的函数
const navigateToTab = (tab) => {
  currentTab.value = tab;
  
  // 平滑滚动到顶部
  window.scrollTo({
    top: 0,
    behavior: 'instant'
  });
};

// 修改 handleTabClick 函数
const handleTabClick = (tab) => {
  currentTab.value = tab;
  
  // 平滑滚动到顶部
  window.scrollTo({
    top: 0,
    behavior: 'instant'
  });
};

onMounted(() => {
  // Initialize chart
  initChart();

  // Simulate loading China map data
  // In a real application, you would load the actual map data
  echarts.registerMap('china', {
    type: 'FeatureCollection',
    features: []
  });
});

onBeforeUnmount(() => {
  if (chart) {
    chart.dispose();
  }

  window.removeEventListener('resize', () => {
    if (chart) chart.resize();
  });
});
</script>

<style lang="less" scoped>
// Variables
@primary-color: #ff6b6b;
@secondary-color: #4ecdc4;
@accent-color: #ffe66d;
@text-color: #333;
@text-light: #666;
@text-dark: #111;
@background-light: #fff;
@background-dark: #1a2639;
@gradient-primary: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
@gradient-secondary: linear-gradient(135deg, #4ecdc4 0%, #2cbfc7 100%);
@border-radius: 8px;
@box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

// Global styles
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  color: @text-color;
  line-height: 1.6;
}

.landing-page {
  width: 100%;
  overflow-x: hidden;
}

.icon {
  width: 20px;
  height: 20px;
}

// Header styles
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5%;
  background-color: rgba(34, 34, 34, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;

  .header-left {
    display: flex;
    align-items: center;

    .logo-container {
      display: flex;
      flex-direction: column;
      margin-right: 30px;

      .logo-text-custom {
        font-size: 26px;
        font-weight: 700;
        letter-spacing: 1px;
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        color: #FF7D00; /* 纯色备用 */
        background: linear-gradient(90deg, #FF9800, #FF5722);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 2px 10px rgba(255, 87, 34, 0.2);
        margin-bottom: 4px;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          bottom: -2px;
          left: 0;
          width: 96%;
          height: 3px;
          background: #FF5722;
          border-radius: 3px;
        }
      }

      .slogan {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.9);
        letter-spacing: 0.5px;
        font-weight: 300;
        margin-left: 2px;
      }
    }

    .nav-links {
      display: flex;
      gap: 24px;

      .nav-link {
        color: rgba(255, 255, 255, 0.85);
        font-size: 15px;
        font-weight: 500;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          color: #FF9800;
          background-color: rgba(255, 255, 255, 0.1);
        }

        &.active-nav {
          color: #FF9800;
          background-color: rgba(255, 152, 0, 0.15);
          font-weight: 600;
        }
      }
    }
  }

  .header-right {
    display: flex;
    align-items: center;

    .login-button {
      background: linear-gradient(90deg, #FF9800, #FF5722);
      border: none;
      color: white;
      padding: 8px 20px;
      border-radius: 4px;
      font-weight: 500;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(255, 87, 34, 0.3);
      }
    }

    .language-selector {
      margin-left: 15px;
      cursor: pointer;

      .icon {
        color: @text-light;
      }
    }
  }
}

// Hero section styles
.hero-section {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 70px;

  .el-carousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;


    .el-carousel__container {
      height: 100%;
    }

    .el-carousel__item {
      height: 100%;
      overflow: hidden;

      .carousel-slide-content {
        width: 100%;
        height: 100%;
        position: relative;

        .carousel-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }

        .carousel-overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.24);
        }
      }
    }

    .el-carousel__indicators {
      bottom: 30px;
    }
    .el-carousel__arrow {
      background-color: rgba(31, 45, 61, 0.5);
      &:hover {
        background-color: rgba(31, 45, 61, 0.8);
      }
    }
  }

  .background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: white;
    max-width: 800px;
    padding: 0 20px;

    .hero-title {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 15px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

      @media (min-width: 768px) {
        font-size: 3.5rem;
      }
    }

    .hero-subtitle {
      font-size: 1.2rem;
      font-weight: 400;
      margin-bottom: 30px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

      @media (min-width: 768px) {
        font-size: 1.5rem;
      }
    }

    .cta-button {
      background: @gradient-primary;
      color: white;
      border: none;
      padding: 12px 30px;
      border-radius: 30px;
      font-size: 1.1rem;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      transition: transform 0.3s, box-shadow 0.3s;

      .icon {
        margin-left: 8px;
      }

      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 15px rgba(255, 107, 107, 0.5);
      }
    }
  }
}

// Features section styles
.features-section {
  padding: 80px 5%;
  background-color: @background-light;

  .section-title {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 50px;
    position: relative;

    &:after {
      content: '';
      position: absolute;
      bottom: -15px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 3px;
      background: @primary-color;
    }
  }

  .features-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;

    @media (min-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media (min-width: 1024px) {
      grid-template-columns: repeat(3, 1fr);
    }

    .feature-card {
      background: white;
      border-radius: @border-radius;
      padding: 30px;
      box-shadow: @box-shadow;
      transition: transform 0.3s;

      &:hover {
        transform: translateY(-10px);
      }

      .feature-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: @gradient-secondary;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;

        .icon {
          width: 30px;
          height: 30px;
          color: white;
        }
      }

      .feature-title {
        font-size: 1.3rem;
        font-weight: 600;
        margin-bottom: 15px;
      }

      .feature-description {
        color: @text-light;
        margin-bottom: 20px;
        font-size: 0.95rem;
      }

      .feature-image {
        width: 100%;
        border-radius: @border-radius;
        overflow: hidden;

        img {
          width: 100%;
          height: auto;
          transition: transform 0.5s;

          &:hover {
            transform: scale(1.05);
          }
        }
      }
    }
  }
}

// Data visualization section styles
.data-visualization-section {
  padding: 80px 5%;
  background-color: @background-dark;
  color: white;

  .data-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;

    @media (min-width: 1024px) {
      grid-template-columns: 3fr 2fr;
    }

    .data-title {
      font-size: 1.8rem;
      font-weight: 600;
      margin-bottom: 25px;
      text-align: center;
    }

    .map-container {
      .map-chart {
        width: 100%;
        height: 400px;
        border-radius: @border-radius;
        overflow: hidden;
      }

      .map-legend {
        display: flex;
        justify-content: center;
        margin-top: 20px;
        gap: 20px;

        .legend-item {
          display: flex;
          align-items: center;

          .legend-color {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;

            &.user-color {
              background: #4CAF50;
            }

            &.danger-color {
              background: #F44336;
            }

            &.species-color {
              background: #2196F3;
            }
          }

          .legend-text {
            font-size: 0.9rem;
          }
        }
      }
    }

    .stats-container {
      .stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;

        @media (min-width: 768px) and (max-width: 1023px) {
          grid-template-columns: repeat(3, 1fr);
        }

        .stat-item {
          background: rgba(255, 255, 255, 0.1);
          border-radius: @border-radius;
          padding: 20px;
          text-align: center;

          .stat-value {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 5px;
            color: @accent-color;
          }

          .stat-label {
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.8);
          }
        }
      }
    }
  }
}

// Testimonials section styles
.testimonials-section {
  padding: 80px 5%;
  background-color: @background-light;

  .testimonials-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;

    @media (min-width: 1024px) {
      grid-template-columns: 1fr 1fr;
    }

    .section-subtitle {
      font-size: 1.8rem;
      font-weight: 600;
      margin-bottom: 30px;
      text-align: center;
    }

    .testimonials-left {
      .video-testimonial {
        position: relative;
        margin-bottom: 30px;
        border-radius: @border-radius;
        overflow: hidden;
        box-shadow: @box-shadow;

        .testimonial-video {
          width: 100%;
          height: auto;
        }

        .play-button {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 60px;
          height: 60px;
          background: rgba(255, 255, 255, 0.8);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;

          .icon {
            width: 24px;
            height: 24px;
            color: @primary-color;
          }
        }

        .video-caption {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          background: rgba(0, 0, 0, 0.7);
          color: white;
          padding: 10px 15px;
          font-size: 0.9rem;
        }
      }

      .text-testimonials {
        display: flex;
        flex-direction: column;
        gap: 20px;

        .testimonial-item {
          background: white;
          border-radius: @border-radius;
          padding: 20px;
          box-shadow: @box-shadow;

          .testimonial-content {
            position: relative;
            padding-left: 25px;
            margin-bottom: 15px;

            .quote-icon {
              position: absolute;
              top: 0;
              left: 0;
              width: 18px;
              height: 18px;
              color: @primary-color;
              opacity: 0.5;
            }

            p {
              font-style: italic;
              color: @text-color;
            }
          }

          .testimonial-author {
            display: flex;
            align-items: center;

            .author-avatar {
              width: 40px;
              height: 40px;
              border-radius: 50%;
              margin-right: 12px;
            }

            .author-info {
              .author-name {
                font-weight: 600;
                font-size: 0.95rem;
              }

              .author-title {
                font-size: 0.8rem;
                color: @text-light;
              }
            }
          }
        }
      }
    }

    .testimonials-right {
      .join-us-container {
        background: linear-gradient(135deg, #2b5876 0%, #4e4376 100%);
        border-radius: @border-radius;
        padding: 0px 30px;
        text-align: center;
        box-shadow: @box-shadow;
        color: white;
        height: 90%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .tagline {
          margin-bottom: 30px;

          .main-tagline {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 15px;
            background: linear-gradient(90deg, #fff, #ffe66d);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }

          .sub-tagline {
            font-size: 1.1rem;
            opacity: 0.9;
            line-height: 1.5;
          }
        }

        .benefits {
          display: flex;
          flex-direction: column;
          gap: 20px;
          margin-bottom: 30px;

          .benefit-item {
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.1);
            padding: 15px;
            border-radius: 10px;

            .benefit-icon {
              width: 36px;
              height: 36px;
              border-radius: 50%;
              background: rgba(255, 255, 255, 0.2);
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 15px;

              .icon {
                width: 20px;
                height: 20px;
                color: @accent-color;
              }
            }

            .benefit-text {
              flex: 1;
              text-align: left;
              font-size: 1rem;
            }
          }
        }

        .join-button {
          background: @gradient-primary;
          color: white;
          border: none;
          padding: 12px 30px;
          border-radius: 30px;
          font-size: 1.1rem;
          font-weight: 600;
          cursor: pointer;
          transition: transform 0.3s, box-shadow 0.3s;
          align-self: center;

          &:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(255, 107, 107, 0.5);
          }
        }
      }
    }
  }
}

// Final CTA section styles
.final-cta-section {
  position: relative;
  padding: 100px 5%;
  background-image: url('/placeholder.svg?height=800&width=1600');
  background-size: cover;
  background-position: center;
  color: white;

  .cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
  }

  .cta-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;

    .cta-title {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 15px;

      @media (min-width: 768px) {
        font-size: 3rem;
      }
    }

    .cta-subtitle {
      font-size: 1.3rem;
      margin-bottom: 25px;
    }

    .cta-benefits {
      list-style: none;
      margin-bottom: 40px;
      display: inline-block;
      text-align: left;

      .benefit-item {
        display: flex;
        align-items: center;
        margin-bottom: 15px;

        .check-icon {
          color: @accent-color;
          margin-right: 10px;
        }

        span {
          font-size: 1.1rem;
        }
      }
    }

    .giant-cta-button {
      background: @gradient-primary;
      color: white;
      border: none;
      padding: 15px 40px;
      border-radius: 40px;
      font-size: 1.2rem;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      transition: all 0.3s;
      position: relative;
      overflow: hidden;

      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        animation: pulse 2s infinite;
      }

      .icon {
        margin-left: 10px;
      }

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(255, 107, 107, 0.6);
      }
    }
  }
}

@keyframes pulse {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

// Footer styles
.footer {
  padding: 30px 5%;
  background-color: @background-light;
  text-align: center;

  .footer-links {
    margin-bottom: 20px;

    .footer-link {
      color: @text-color;
      text-decoration: none;
      font-size: 0.9rem;
      transition: color 0.3s;

      &:hover {
        color: @primary-color;
      }
    }

    .divider {
      margin: 0 10px;
      color: @text-light;
    }
  }

  .social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;

    .social-link {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #f5f5f5;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;

      .social-icon {
        width: 20px;
        height: 20px;
        color: @text-color;
      }

      &:hover {
        background: @primary-color;

        .social-icon {
          color: white;
        }
      }
    }
  }

  .copyright {
    font-size: 0.8rem;
    color: @text-light;
  }
}

// 添加新样式
.content-section {
  min-height: calc(100vh - 70px);
  margin-top: 70px; // 与顶部导航栏的高度相同
  padding: 20px 5%;
  background-color: #f9f9f9;
}
</style>
